export const palette = {
  brandBlue: '#26374A',
  linkBlue: '#2B4380',
  bodyBlack: '#000000',
  bodySubdued: '#5B5B5B',
  greenBright: '#A4DE82',
  lightGreenBackground: '#C7F2CF',
  white: '#FFFFFF',
  fadedWhite: 'rgba(0, 0, 0, 0.2)',
  fadedWhiteDark: 'rgba(0, 0, 0, 0.4)',
  success: '#006536',
  danger: '#B1081E',
  error: '#D3080C',
  brandRed: '#AF3C43',
  lightBlue: '#89CDFB',
  neutralGrey: '#EEEEEE',
  darkGrey: '#cecece',
  black: '#000000',
  buttonGrey: '#EEEEEE',
  danger10: '#FEE9E6',
  danger25: '#FEA88E',
  danger50: '#F7635D',
  purple: '#573EC5',
  gray1Text: '#333333',
  gray2: '#585858',
  gray3: '#8A8A8A',
  gray4: '#BCBCBC',
  green2: '#C9E7DE',
  info100: '#005B99',
  focus: '#44BBEE',
  exposure25: '#C1BFFF',
  scan25: '#FEEFB8',

  greyCanada25: '#D0D7DE',
  loudYellow: '#F5D547',
};

const theme = {
  colors: {
    focus: palette.focus,
    mainBackground: palette.neutralGrey,
    greenBackground: palette.greenBright,
    lightGreenBackground: palette.lightGreenBackground,
    overlayBackground: palette.white,
    danger10: palette.danger10,
    danger25Background: palette.danger25,
    overlayBodyText: palette.bodyBlack,
    fadedBackground: palette.fadedWhite,
    bodyText: palette.bodyBlack,
    bodyTitleWhite: palette.white,
    bodyTextSubdued: palette.bodySubdued,
    statusSuccess: palette.success,
    statusError: palette.danger,
    infoBlockNeutralBackground: palette.neutralGrey,
    divider: palette.fadedWhite,
    buttonGrey: palette.buttonGrey,
    gray1Text: palette.gray1Text,
    gray2: palette.gray2,
    gray3: palette.gray3,
    gray4: palette.gray4,
    gray5: palette.neutralGrey,
    greyCanada25: palette.greyCanada25,
    green2: palette.green2,
    otkButton: palette.lightBlue,
    qrButton: palette.loudYellow,
  },
  spacing: {
    /* eslint-disable id-length */
    xxxs: 2,
    xxs: 4,
    xs: 6,
    s: 8,
    m: 16,
    l: 24,
    xl: 32,
    xxl: 43,
    '-s': -8,
    '-m': -16,
    '-l': -24,
    '-xl': -32,
    '-xxl': -43,
    none: 0,
    /* eslint-enable id-length */
  },
  breakpoints: {
    phone: 0,
  },
  textVariants: {
    smallText: {
      fontFamily: 'notosans',
      fontSize: 16,
      lineHeight: 23,
    },
    bodyText: {
      fontFamily: 'notosans',
      fontSize: 18,
      lineHeight: 25,
    },
    bodySubTitle: {
      fontFamily: 'notosans',
      fontWeight: 'bold',
      fontSize: 18,
      lineHeight: 25,
    },
    settingTitle: {
      fontFamily: 'notosans',
      fontSize: 23,
      lineHeight: 30,
    },
    bodyTitle: {
      fontFamily: 'notosans',
      fontWeight: 'bold',
      fontSize: 23,
      lineHeight: 30,
    },
    bodyTitle2: {
      fontFamily: 'notosans',
      fontWeight: 'bold',
      fontSize: 20,
      lineHeight: 30,
    },
    overlayTitle: {
      fontFamily: 'notosans',
      fontSize: 23,
      lineHeight: 30,
    },
    menuItemTitle: {
      fontFamily: 'notosans',
      fontSize: 18,
      lineHeight: 25,
    },
    menuItemSubtitle: {
      fontFamily: 'notosans',
      fontSize: 18,
      lineHeight: 25,
    },
  },
  buttonVariants: {
    danger50Flat: {
      color: palette.danger50,
      height: 52,
      textColor: palette.black,
      fontFamily: 'notosans',
      fontSize: 16,
      borderBottomWidth: 4,
      borderBottomColor: palette.brandRed,
      disabled: {
        color: palette.gray4,
        textColor: palette.bodyBlack,
        borderBottomColor: palette.gray3,
      },
    },
    dangerWhiteText: {
      color: palette.danger,
      height: 52,
      textColor: palette.white,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {
        color: palette.gray4,
        textColor: palette.bodyBlack,
        borderBottomColor: palette.gray3,
      },
    },
    bigFlat: {
      color: palette.info100,
      height: 52,
      textColor: palette.white,
      fontFamily: 'notosans',
      fontSize: 18,
      borderBottomWidth: undefined,
      disabled: {
        color: palette.gray4,
        textColor: palette.bodyBlack,
        borderBottomColor: palette.gray3,
      },
    },
    thinFlat: {
      color: palette.info100,
      height: 52,
      textColor: palette.white,
      fontFamily: 'notosans',
      fontSize: 18,
      borderBottomWidth: 4,
      borderBottomColor: palette.brandBlue,
      disabled: {
        color: palette.gray4,
        textColor: palette.bodyBlack,
        borderBottomColor: palette.gray3,
      },
    },
    thinFlatNoBorder: {
      color: palette.info100,
      height: 52,
      textColor: palette.white,
      fontFamily: 'notosans',
      fontWeight: 'bold',
      fontSize: 18,
      disabled: {},
    },
    thinFlatBlue: {
      color: palette.neutralGrey,
      height: 52,
      textColor: palette.black,
      fontFamily: 'notosans',
      fontSize: 18,
      borderBottomWidth: 4,
      borderBottomColor: palette.darkGrey,
      disabled: {
        color: palette.gray4,
        textColor: palette.bodyBlack,
        borderBottomColor: palette.gray3,
      },
    },
    opaqueGrey: {
      color: palette.buttonGrey,
      height: 52,
      textColor: palette.black,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {
        color: palette.gray4,
        textColor: palette.bodyBlack,
        borderBottomColor: palette.gray3,
      },
    },
    bigFlatNeutralGrey: {
      color: palette.neutralGrey,
      height: 52,
      textColor: palette.black,
      fontFamily: 'notosans',
      fontSize: 16,
      borderBottomWidth: undefined,
      disabled: {},
    },
    thinFlatNeutralGrey: {
      color: palette.neutralGrey,
      height: 52,
      textColor: palette.black,
      fontFamily: 'notosans',
      fontSize: 18,
      borderBottomWidth: 4,
      borderBottomColor: palette.darkGrey,
      disabled: {},
    },
    bigFlatDarkGrey: {
      color: palette.darkGrey,
      height: 52,
      textColor: palette.black,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      paddingHorizontal: 5,
      paddingVertical: 10,
      disabled: {},
    },
    bigFlatPurple: {
      color: palette.purple,
      fontWeight: 'bold',
      height: 30,
      textColor: palette.white,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {
        color: palette.darkGrey,
        textColor: palette.bodyBlack,
      },
    },
    bigFlatBlue: {
      color: palette.brandBlue,
      fontWeight: 'bold',
      height: 30,
      textColor: palette.white,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {
        color: palette.darkGrey,
        textColor: palette.bodyBlack,
      },
    },
    exposure25: {
      color: palette.exposure25,
      fontWeight: 'normal',
      height: 30,
      textColor: palette.bodyBlack,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {
        color: palette.darkGrey,
        textColor: palette.bodyBlack,
      },
    },
    scan25: {
      color: palette.scan25,
      fontWeight: 'normal',
      height: 30,
      textColor: palette.bodyBlack,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {
        color: palette.darkGrey,
        textColor: palette.bodyBlack,
      },
    },
    text: {
      color: 'transparent',
      height: 52,
      textColor: palette.linkBlue,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {},
    },
    whiteText: {
      color: 'transparent',
      height: 52,
      textColor: palette.white,
      fontFamily: 'notosans',
      fontSize: 18,
      borderWidth: undefined,
      disabled: {},
    },
    buttonSelect: {
      color: 'bodyText',
      height: 52,
      textColor: palette.bodyBlack,
      fontFamily: 'notosans',
      borderColor: 'bodyText',
      fontSize: 18,
      disabled: {
        borderColor: 'fadedBackground',
      },
    },
    plain: {
      color: palette.white,
      height: 52,
      textColor: palette.bodyBlack,
      fontFamily: 'notosans',
      borderColor: 'bodyText',
      fontSize: 18,
      disabled: {
        borderColor: 'fadedBackground',
      },
    },
  },
  maxContentWidth: 500,
};

export type Theme = typeof theme;
export default theme;
